<template>
  <el-table-column v-if="item.isFromAddress"
                   :key="index"
                   align="center"
                   min-width="180px"
                   :label="item.label"
                   :width="item.width">
    <template slot-scope="scope">
      <div class="column-flex">
        <div>
          <div :class="{'column-style': scope.row.isFromError}">{{ scope.row.fromCity }}</div>
          <div>{{ scope.row.startAddress || scope.row.fromAddress.address}}</div>
        </div>
        <div v-if="scope.row.isFromError"
             class="error">
          <el-tooltip :content="scope.row.isFromErrorTip"
                      placement="top"
                      effect="light">
            <i class="el-icon-warning"></i>
          </el-tooltip>
        </div>
      </div>
    </template>
  </el-table-column>
  <el-table-column v-else-if="item.isToAddress"
                   :key="index"
                   min-width="180px"
                   align="center"
                   :label="item.label"
                   :width="item.width">
    <template slot-scope="scope">
      <div class="column-flex">
        <div>
          <div :class="{'column-style': scope.row.isToError}">{{ scope.row.toCity }}</div>
          <div>{{ scope.row.endAddress || scope.row.toAddress.address}}</div>
        </div>
        <div v-if="scope.row.isToError"
             class="error">
          <el-tooltip :content="scope.row.isToErrorTip"
                      placement="top"
                      effect="light">
            <i class="el-icon-warning"></i>
          </el-tooltip>
        </div>
      </div>
    </template>
  </el-table-column>
  <el-table-column v-else-if="item.prop === 'price'"
                   :key="index"
                   :prop="item.prop"
                   align="right"
                   :formatter="formatterPrice"
                   :label="item.label"
                   :width="item.width">
  </el-table-column>
  <el-table-column v-else-if="item.prop === 'days'"
                   :key="index"
                   :prop="item.prop"
                   align="right"
                   :label="item.label"
                   :width="item.width">
    <template slot-scope="scope">
      <div class="column-flex">
        <div :class="{'column-style': scope.row.isDaysError}">{{ scope.row.days }}</div>
        <div v-if="scope.row.isDaysError"
             class="error">
          <el-tooltip :content="scope.row.isDaysErrorTip"
                      placement="top"
                      effect="light">
            <i class="el-icon-warning"></i>
          </el-tooltip>
        </div>
      </div>
    </template>
  </el-table-column>
  <!-- 车型 -->
  <el-table-column v-else-if="item.prop === 'vehicleModel' || item.isVehicleModelDesc"
                   :key="index"
                   :prop="item.prop"
                   align="right"
                   :label="item.label"
                   :width="item.width">
    <template slot-scope="scope">
      <div class="column-flex">
        <div :class="{'column-style': scope.row.isVehicleModelError}">{{ model(scope.row.vehicleModel) }}</div>
        <div v-if="scope.row.isVehicleModelError"
             class="error">
          <el-tooltip :content="scope.row.isVehicleModelTip"
                      placement="top"
                      effect="light">
            <i class="el-icon-warning"></i>
          </el-tooltip>
        </div>
      </div>
    </template>
  </el-table-column>
  <!-- 车辆 -->
  <el-table-column v-else-if="item.prop === 'vehicleLengthDesc' || item.isVehicleLengthDesc"
                   :key="index"
                   :prop="item.prop"
                   align="right"
                   :label="item.label"
                   :width="item.width">
    <template slot-scope="scope">
      <div class="column-flex">
        <div :class="{'column-style': scope.row.isVehicleLengthError}">{{ scope.row.vehicleLengthDesc }}</div>
        <div v-if="scope.row.isVehicleLengthError"
             class="error">
          <el-tooltip :content="scope.row.isVehicleLengthTip"
                      placement="top"
                      effect="light">
            <i class="el-icon-warning"></i>
          </el-tooltip>
        </div>
      </div>
    </template>
  </el-table-column>
  <!-- 价格 -->
  <el-table-column v-else-if="item.prop === 'price' || item.isPrices"
                   :key="index"
                   :prop="item.prop"
                   align="right"
                   :label="item.label"
                   :width="item.width">
    <template slot-scope="scope">
      <div class="column-flex">
        <div :class="{'column-style': scope.row.isPriceError}">{{ scope.row.price }}</div>
        <div v-if="scope.row.isPriceError"
             class="error">
          <el-tooltip :content="scope.row.isPriceTip"
                      placement="top"
                      effect="light">
            <i class="el-icon-warning"></i>
          </el-tooltip>
        </div>
      </div>
    </template>
  </el-table-column>
  <el-table-column v-else-if="item.isPriceError"
                   :key="index"
                   :prop="item.prop"
                   align="right"
                   :label="item.label"
                   :width="item.width">
    <template slot-scope="scope">
      <div class="column-flex">
        <div :class="{'column-style': scope.row.isPriceError}">{{ scope.row[item.prop] }}</div>
        <div v-if="scope.row.isPriceError"
             class="error">
          <el-tooltip :content="scope.row.isPriceTip"
                      placement="top"
                      effect="light">
            <i class="el-icon-warning"></i>
          </el-tooltip>
        </div>
      </div>
    </template>
  </el-table-column>
  <el-table-column v-else
                   :key="index"
                   :prop="item.prop"
                   align="center"
                   :label="item.label"
                   :width="item.width">
  </el-table-column>
</template>

<script>
import { loadVehicleModels } from "@basic/assets/vehicle.models";
import vehicleModel from "@basic/assets/vehicle.models";

export default {
  name: 'Address',
  props: {
    item: {
      type: Object,
      default: () => { }
    },
    scope: {
      type: Object,
      default: () => { }
    },
    index: {
      type: Number,
      default: null
    }
  },
  computed: {
    model () {
      return model => {
        return vehicleModel?.value.find(desc => desc.value === model)?.name
      }
    }
  },
  created () {
    loadVehicleModels()
  },
  methods: {
    formatterPrice (rows) {
      let n = '';
      n = String(rows.price);
      if (!n) return n;
      let str = n.split('.');
      let re = /\d{1,3}(?=(\d{3})+$)/g;
      let n1 = str[0].replace(re, "$&,");
      return str.length > 1 && str[1] ? `${n1}.${str[1]}` : `${n1}.00`;
    },
  }
}
</script>

<style scoped>
.column-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.error {
  font-size: 18px;
  color: var(--prev-color-text-purered);
}
.column-style {
  color: var(--prev-color-text-purered);
  font-weight: bold;
}
</style>